import { Card, Form, Input, Checkbox, Button } from 'antd';
import { LockOutlined, PhoneOutlined } from '@ant-design/icons';
import { useSelector, useDispatch } from 'react-redux';

import { decrement } from '@/store/modules/counterStore';
import styles from './styles.module.css';

import { Link } from 'react-router-dom';
import logo from '@/assets/logo.jpg';

const login = () => {
  // Form.Item的简写形式
  const Item = Form.Item;
  const { count } = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  return (
    <div className={styles.login}>
      <Card className={styles.login_container}>
        {count} <img src={logo} alt="图片" className={styles.login_logo} />
        {/* 登录表单 */}
        <Form
          validateTrigger={['onBlur', 'onChange']}
          initialValues={{ remember: true }}
        >
          <Item
            name="phone"
            rules={[
              { required: true, message: '请输入手机号' },
              {
                pattern: /^1[3-9]\d{9}$/, // 设置正则匹配规则
                validateTrigger: 'onBlur', // 设置触发时机失去焦点时触发
                message: '请输入正确的手机号格式',
              },
            ]}
          >
            <Input
              size="large"
              maxLength="11"
              addonBefore={<PhoneOutlined />}
              placeholder="请输入手机号"
            />
          </Item>
          <Item
            name="password"
            rules={[
              { required: true, message: '请输入密码' },
              {
                len: 6, // 设置密码长度为6位数
                validateTrigger: 'onBlur',
                message: '请输入6位密码',
              },
            ]}
          >
            <Input.Password
              size="large"
              maxLength="6"
              addonBefore={<LockOutlined />}
              placeholder="请输入密码"
            />
          </Item>
          <Item name="remember" valuePropName="checked">
            <Checkbox>
              我已经阅读并同意<Link>用户协议</Link>和<Link>隐私条款</Link>
            </Checkbox>
          </Item>
          <Item>
            <Button
              type="primary"
              htmlType="submit"
              size="large"
              block
              onClick={() => dispatch(decrement())}
            >
              登录
            </Button>
          </Item>
        </Form>
      </Card>
    </div>
  );
};

export default login;
